<template>
	<view class="page-root">
		<nav-bar backState="2000">
			<view slot="right">
				<!-- <image class="right_icon" :src="messageIconUrl" @click="testClick"></image> -->
			</view>
			实时数据
		</nav-bar>

		<scroll-view>
			<view :class="jumpToInstrumentBitNumber  == item.DeviceName ? 'doc-item-selected' : 'doc-item'" v-for="(item,index) in dataList" :key="index">
				<view style="width: 30%;">
					<view class="item-pos">{{item.DeviceName}}</view>
					<view class="item-desc">{{item.TagDes}}</view>
				</view>

				<view style="width: 50%; align-content: flex-end;">
					<view class="item-data" :style="((item.OfflineValues == '' && item.OnlineValue == '') || (item.QValue > item.OfflineValues && item.QValue < item.OnlineValue)) ? 'color:#0000ff' : 'color:#ff0000' ">{{item.QValue}}{{item.Unit}}</view>

					<view v-if="item.OfflineValues != '' && item.OnlineValue != ''" class="value-online">{{item.OfflineValues + item.Unit}}
						~ {{item.OnlineValue + item.Unit}}</view>
				</view>
				<!-- <image class="item-image" :src="moreIconUrl" @click="showGraphic(item)"></image> -->
				<image class="item-image" :src="moreIconUrl" @click="actionSheetTap(item)"></image>
			</view>
			<view style=" height: 250upx;"></view>
		</scroll-view>


		<uni-popup ref="trendPopup" type="bottom" :animation="true" @change="onGraphicShowChange">
			<trendGraph :bitNumber="graphicBitNumber" :currentDataList="graphicCurrentDataList"></trendGraph>
		</uni-popup>

	</view>
</template>

<script>
	import test_datalist from "@/common/test_jsons/test_datalist.js"
	import CONSTS from '@/common/biz/consts.js'
	import {
		getDeviceList,
	} from '@/services/instrument.js';
	import {
		SearchDoc,
		GetModelData,
		SearchAssociatedData
	} from '@/services/index.js';

	import trendGraph from "./_compoments/trendGraph.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			trendGraph,
			uniPopup,
		},
		
		computed: {
			...mapState(['jumpToInstrumentBitNumber']),
		},
		
		data() {
			return {
				messageIconUrl: '/static/' + 'icon_navigation_news.png',
				moreIconUrl: '/static/' + 'instrument_more.png',
				dataList: test_datalist.data.list,

				waitTime: 2000,
				timeoutID: null,

				graphicBitNumber: '',
				graphicCurrentDataList: [],
				isGraphicShowing: false,
			}
		},

		onLoad() {
			this.reLoadListData();
			
			// 监听事件
			uni.$on('switchtab-instrument', (data) => {
				console.log("switchtab-instrument : ");
				console.log(data);
				this.selectBitNumber = data.bitNumber;
			})
		},
		
		onHide() {
			this.clearJumpToInstrumentBitNumber();
		},

		onUnload() {
			clearTimeout(this.timeoutID)
		},

		methods: {
			...mapMutations(['clearJumpToInstrumentBitNumber']),
			testClick() {
				this.$refs.trendPopup.open()
			},

			startTimer() {
				this.timeoutID = setTimeout(() => {
					this.reLoadListData();
				}, this.waitTime);
			},


			reLoadListData() {
				this.searchPage = 0;
				this.getDataList(this.searchPage + 1);
			},

			getDataList(inPage) {
				getDeviceList({
					MileageID: CONSTS.DEFAULT_MODEL_ID,
					// Type: 2,
					page: inPage,
					linit: CONSTS.PAGE_DEFAULT_LIMIT,
				}).then((res) => {
					// console.log("instrument:")
					// console.log(res)
					if (res.code == '000000') {
						// if (inPage == 0)
						this.dataList = res.data;

						if (this.isGraphicShowing) {
							for (var i = 0; i < this.dataList.length; i++) {
								if (this.dataList[i].DeviceName == this.graphicBitNumber) {
									let temp = {};
									temp.DeviceName = this.dataList[i].DeviceName;
									temp.MileageID = this.dataList[i].MileageID;
									temp.OPCAddress = this.dataList[i].OPCAddress;
									temp.QValue = this.dataList[i].QValue;
									temp.Unit = this.dataList[i].Unit;

									let date = new Date();
									let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
									let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
									let second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
									temp.CreateTime = hour + ":" + minute + ":" + second;

									this.graphicCurrentDataList.unshift(temp);

									if (this.graphicCurrentDataList.length > 10)
										this.graphicCurrentDataList.pop()

									break;
								}
							}
						}
					}
					this.startTimer();
				});
			},

			showGraphic(e) {
				this.$refs.trendPopup.open()
				this.graphicBitNumber = e.DeviceName;
			},

			onGraphicShowChange(e) {
				this.isGraphicShowing = e.show;
				this.graphicCurrentDataList = [];
			},

			actionSheetTap(e) {
				uni.showActionSheet({
					itemColor: "#327FFC",
					title: e.DeviceName + " " + e.TagDes,
					itemList: ['查看3D模型','查看2D图纸', '历史记录'],
					success: (sube) => {
						console.log(sube.tapIndex);
						// if (sube.tapIndex == 0)
						// 	this.jumpTo3D(e);
						// else if (sube.tapIndex == 0)
						// 	this.jumpTo2D(e);

						this.onListItemClick(e, sube.tapIndex)
					}
				})
			},

			onListItemClick(row, targetIndex) {
				uni.showLoading({
					title: '加载中'
				});
				GetModelData({
						glid: '',
						BitNumber: row.DeviceName || row.BitNumber,
						MileageID: CONSTS.DEFAULT_MODEL_ID
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == '000000') {
							let glids = ''
							if (res.data.glid.length > 1) {
								glids = res.data.glid.join('#')
							} else {
								glids = res.data.glid[0]
							}
							if (targetIndex == 0) {
								this.jumpTo3D(glids, row.DeviceName || row.BitNumber)
							} 
							else if (targetIndex == 1) {
								this.jumpTo2D(row.DeviceName || row.BitNumber)
							}
							else if (targetIndex == 2) {
								// this.jumpTo2D(glids, row.DeviceName || row.BitNumber)
								this.showGraphic(row)
							}

						} else {
							uni.showToast({
								title: res.msg
							})
						}
					})
			},

			jumpTo3D(inGlids, inBitNumber) {
				uni.$emit('search-bit', {
					glids: inGlids,
					bitNumber: inBitNumber,
				});

				uni.switchTab({
					url: "/pages/home/homeCustom"
				})
			},

			jumpTo2D(e) {
				// debugger
				uni.showLoading({
					title: '加载中'
				});
				SearchAssociatedData({
					MileageID:  CONSTS.DEFAULT_MODEL_ID,
					BitNumber: e
				}).then((res) => {
					uni.hideLoading();
					if (res.code == '000000') {
						// console.log("doRequestDocs")
						// console.log(res.data.SearchPidData)
						if(res.data.SearchPidData && res.data.SearchPidData.length > 0) {
							let svgUrl = res.data.SearchPidData[0].FilePath;
							let svgName = res.data.SearchPidData[0].Name;
							let bitNumber = e;
							
							uni.navigateTo({
								url: '/pages/drawing/drawingShow?url=' + svgUrl + '&title=' + svgName + "&BitNumber=" + bitNumber,
							})
						}
						else {
							uni.showToast({
								title:"暂无关联图纸"
							})
						}
					}
				});

			}
		}
	}
</script>

<style scoped lang='scss'>
	.page-root {
		background: #F8F8F8;

	}

	.right_icon {
		width: 32upx;
		height: 32upx;
		padding: 15upx;
		border-radius: 25px;
		border: 1px solid rgba(255, 255, 255, 1.0);
		margin-right: 20upx;
		background-color: #FFFFFF;
	}

	.head-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 32upx;
	}

	.head-icon {
		width: 4upx;
		height: 28upx;
		background: linear-gradient(180deg, #259DB7 0%, #016A9B 100%);
		border-radius: 1px;
	}

	.head-title {
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
		margin-left: 16upx;
	}

	.doc-item {
		background: #FCFCFC;
		box-shadow: 0px 1px 7px 0px rgba(84, 84, 84, 0.05);
		border-radius: 2px;
		margin: 32upx 32upx 32upx 32upx;
		padding: 24upx 32upx;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.doc-item-selected {
		background: #FCFCFC;
		box-shadow: 0px 1px 7px 0px rgba(84, 84, 84, 0.05);
		border-radius: 2px;
		margin: 32upx 32upx 32upx 32upx;
		padding: 24upx 32upx;
		
		border: 2upx solid #327FFC;	
	
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.item-pos {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.65);
		line-height: 40upx;

	}

	.item-desc {
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 30upx;
		margin-top: 8upx;
	}

	.item-data {
		font-size: 32upx;
		text-align: right;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #327FFC;
	}

	.item-image {
		width: 44upx;
		height: 44upx;
	}

	.value-online {
		font-size: 24upx;
		color: #808080;
		text-align: right;

		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;

		margin-top: 8upx;
	}
</style>
